<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
    <div class="warehouse-home-page">
        <StatisticsPanel />
        
        <el-row :gutter="20">
            <el-col :lg="16" :md="24">
                <BusinessTrendChart />
                <el-row :gutter="20">
                    <el-col :md="12">
                        <InventoryWarning />
                    </el-col>
                    <el-col :md="12">
                        <BatchExpiryMonitor />
                    </el-col>
                </el-row>
            </el-col>
            <el-col :lg="8" :md="24">
                <WarehouseDistribution />
                <el-row :gutter="20">
                    <el-col :md="24">
                        <ProductTurnover />
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        
        <WarehouseCapacity />
        <QuickActions />
        <RecentOperations />
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
// import { useDashboardApi } from '/@/api/backend/yxerp/dashboard'
import StatisticsPanel from './components/StatisticsPanel.vue'
import BusinessTrendChart from './components/BusinessTrendChart.vue'
import WarehouseDistribution from './components/WarehouseDistribution.vue'
import InventoryWarning from './components/InventoryWarning.vue'
import BatchExpiryMonitor from './components/BatchExpiryMonitor.vue'
import ProductTurnover from './components/ProductTurnover.vue'
import WarehouseCapacity from './components/WarehouseCapacity.vue'
import QuickActions from './components/QuickActions.vue'
import RecentOperations from './components/RecentOperations.vue'

const { t } = useI18n()
// const dashboardApi = useDashboardApi()

// 初始化仪表盘数据
const initDashboard = () => {
    // 暂时注释掉API调用，使用测试数据
    /*
    dashboardApi.getDashboardData().then(res => {
        console.log('Dashboard data loaded:', res)
    }).catch(err => {
        console.error('Error loading dashboard data:', err)
    })
    */
}

onMounted(() => {
    initDashboard()
})
</script>

<style scoped lang="scss">
.warehouse-home-page {
    padding: 20px;
    
    @media screen and (max-width: 768px) {
        padding: 10px;
    }
}
</style> 